<script src="/themes/script/jquery.js" type="text/javascript"></script> 
<script type="text/javascript">
$(function()
{
	$("#test1 a").mouseover(function()
	{	
		var index = $("#test1 a").index(this);
		var width = $("#test1 a").width();
		$("#test1 .showhover").stop().animate({left:width*index},1000);
	})
	$("#test2 a").mouseover(function()
	{	
		var index = $("#test2 a").index(this);
		var width = $("#test2 a").width();
		$("#test2 .showhover").stop().animate({left:width*index,opacity:'0.6'},1000).stop(false,true).animate({opacity:'1.0'},500);
	})
})
</script> 
<style type="text/css">
.body {margin:10px;}
img {border:0;}
a {text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
.menu {background:#003399; height:25px; width:600px; position:relative; overflow:hidden;}
.menu .showmenu, .menu .showhover{ position:absolute;}
.menu .showmenu a {float:left; display:block;}
.menu .showmenu a {font:700 12px/25px Microsoft YaHei; color:#fff; width:100px; height:25px; text-align:center;}
.menu .showhover {background:#990033; width:100px; height:25px;}
</style>
</head>
<body>
<div class="menu" id="test1">
	<div class="showhover"></div>
	<div class="showmenu">
		<a href="#">网站首页</a>
		<a href="#">关于我们</a>
		<a href="#">新闻中心</a>
		<a href="#">产品中心</a>
		<a href="#">解决方案</a>
		<a href="#">联系我们</a>
	</div>
</div>
<div style="clear:both;height:50px;"></div>
<div class="menu" id="test2">
	<div class="showhover"></div>
	<div class="showmenu">
		<a href="#">网站首页</a>
		<a href="#">关于我们</a>
		<a href="#">新闻中心</a>
		<a href="#">产品中心</a>
		<a href="#">解决方案</a>
		<a href="#">联系我们</a>
	</div>
</div>